<template>
  <!--  支付类型选择 -->
  <div>

    <div class='mc' v-show='isdocType' @click.stop='isdocType=false'>
      <div class='duration' @click.stop='isdocType=true'>
        <div class='top'>
          <a @click.stop='isdocType=false'>取消</a>
          <a @click.stop='sureDocType'>确定</a>
        </div>
        <mt-picker :slots="slotsDocType" :valueKey="'numbering'?'numbering':''" @change="onValuesChangeDocType"></mt-picker>
      </div>
    </div>
    <div class="newfresh">
      <ul>
        <li v-for='(item,index) in courseList' :key='index' v-if="courseList.length>0">
          <a @click="goNExt(item)">
            <p>
              <img src="../../image/_pausecolumn3.png" width="33" height="33" alt="">
            </p>
            <div>
              <h3>{{item.course_name}}</h3>
              <p>
                主讲老师：{{item.teacher_name}}
              </p>
            </div>
          </a>
          <!-- </router-link> -->
          <div style="  display: flex;
        flex-direction: column;
        justify-content: space-around;  ">
            <span v-if="item.iffree=='charge'">{{item.charge}}.00</span>
            <span v-text="$utils.goodTime(item.time)"></span>
          </div>
        </li>
      </ul>
    </div>
  </div>

</template>
<script type="text/javascript">
  export default {
    data() {
      return {
        courseList: [],
        isdocType: false, //是否显示就诊类型选择
        slotsDocType: [{
          values: ['微信', '支付宝'],
          className: 'slot1',
          textAlign: 'center'
        }, ],
        charge: ''
      }
    },
    methods: {
      // 支付类型选择
      onValuesChangeDocType(picker, values) {
        this.valuesDocType = values[0];
      },
      sureDocType() {
        console.log(this.valuesDocType)
        if (this.valuesDocType == '微信') {
          this.isdocType = false;
          var params = {
            courseid: this.id,
            userid: localStorage.getItem('loginMobile'),
            price: this.charge
          }
          this.$api.post(this.$api.baseURLSchool, "update_user_order/course_order", params, r => {
            if (r.data.ret == 1) {
              const data = {
                order_num: r.data.order_num,
                total_fee: this.charge,
                des: '视频'
              };
              this.$api.post(this.$api.baseURL2, "/android_wxpay", data, r => {
                var params = {
                  partnerid: r.data.mch_id, // merchant id 
                  prepayid: r.data.prepay_id, // prepay id 
                  noncestr: r.data.nonce_str, // nonce 
                  timestamp: r.data.timestamp, // timestamp 
                  sign: r.data.sign, // signed string 
                };
                Wechat.sendPaymentRequest(params, function () {
            this.$utils._toast('支付成功');
          }, function (reason) {
            this.$utils._toast(reason);
          });
              }, err => {
                console.log(err);
              }, false, false)
            }
          }, err => {
            console.log(err);
          })


        } else if (this.valuesDocType == '支付宝') {
          //   支付宝支付
          this.isdocType = false;
          var params = {
            courseid: this.id,
            userid: localStorage.getItem('loginMobile'),
            price: this.charge
          }
          this.$api.post(this.$api.baseURLSchool, "update_user_order/course_order", params, r => {
            if (r.data.ret == 1) {
              const data = {
                order_num: r.data.order_num,
                amount: this.charge,
                subject: '视频'
              };
              this.$api.post(this.$api.baseURL2, "/alipay_app", data, r => {
            var params = r.data.data;
            cordova.plugins.alipay.payment(params, function () {
              this.$utils._toast('支付成功');
            }, function (reason) {
              this.$utils._toast(reason);
            });
          }, err => {
            console.log(err);
          }, false, false)
            }
          }, err => {
            console.log(err);
          })
        }
      },
      //获取专栏下的课程列表中某一课程id
      getCidData() {
        this.id = this.$route.query.id;
        this.$api.get(this.$api.baseURLSchool, "selectdata2/course?z_id=" + this.id, {}, r => {
          var that = this;
          var list = r.data.info;
          this.courseList = r.data.info;
        }, err => {
          console.log(err);
        })
      },
      goNExt(item) {
        if (item.iffree == 'charge' && item.charge != 0) {
          this.$api.get(this.$api.baseURLSchool, "view_detail/course_order?userid=" + localStorage.getItem(
              'loginMobile') +
            "&courseid=" + item.id + "", {}, r => {
              if (r.data.ret == 1) {
                if (r.data.info.status == 'pay') {
                  this.$router.push({
                    name: 'homeDetail',
                    query: {
                      id: item.id,
                      type: 'columndetail',
                      typeId: this.$route.query.id,
                    }
                  });
                } else {

                  //   this.order_num = r.data.order_num;
                  this.id = item.id;
                  this.charge = item.charge;
                  this.isdocType = true;
                }
              } else if (r.data.ret == 0) {
                var params = {
                  courseid: item.id,
                  userid: localStorage.getItem('loginMobile'),
                  price: item.charge
                }
                // this.order_num = r.data.order_num;
                this.id = item.id;
                this.charge = item.charge;
                this.isdocType = true;
              }
            }, err => {
              console.log(err);
            })
        } else {
          this.$router.push({
            name: 'homeDetail',
            query: {
              id: item.id,
              type: 'columndetail',
              typeId: this.$route.query.id,
            }
          });
        }
      },
    },
    created() {
      this.getCidData();
    }
  }

</script>
<style lang="scss" scoped>
  .mc {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    z-index: 99;

    .duration {
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 235px;
      background: #fff;

      div.top {
        display: flex;
        height: 45px;
        line-height: 45px;
        background: linear-gradient(to bottom, #7ad8ad,  #67b296);
        padding: 0 25px;

        a {
          flex: 1;
          font-size: 17px;
          color: #fff;

          &:last-child {
            text-align: right;
          }
        }
      }
    }
  }

</style>
